<template>
  <div id="picMain" style="width: 450px; height: 400px"></div>
</template>

<script setup>
import * as echarts from 'echarts';
import { watch, ref } from 'vue';
const props = defineProps({
  eduNeed: {
    type: Object,
    default: () => {},
  },
});
const newEduNeed = ref({});
const eduForFan = ref([]);
watch(
  () => props.eduNeed,
  (newValue) => {
    if (newValue) {
      eduForFan.value = newValue.eduForFan.map((item) => {
        return {
          name: item.edu,
          value: (item.ratio * 100).toFixed(0),
        };
      });
      newEduNeed.value = newValue;
      handleChat();
    }
  }
);
const myChart = ref(null);
const option = ref({});
const handleChat = () => {
  let chartDom = document.getElementById('picMain');
  myChart.value = echarts.init(chartDom);

  let datas = [eduForFan.value];
  option.value = {
    title: {
      text: newEduNeed.value.titleForFan,
      left: 'left',
      textStyle: {
        // color: "#999",
        // fontWeight: "normal",
        fontSize: 16,
      },
    },
    series: datas.map(function (data) {
      // let top = idx * 33.3;
      return {
        type: 'pie',
        // radius: [20, 60],
        top: 5 + '%',
        // height: "33.33%",
        // left: "center",
        // width: 400,
        itemStyle: {
          borderColor: '#fff',
          borderWidth: 1,
        },
        label: {
          alignTo: 'edge',
          formatter: '{name|{b}}\n{ratio|{c}%}',
          minMargin: 5,
          edgeDistance: 10,
          lineHeight: 15,
          rich: {
            time: {
              fontSize: 10,
              color: '#999',
            },
          },
        },
        labelLine: {
          length: 15,
          length2: 0,
          maxSurfaceAngle: 80,
        },
        labelLayout: function (params) {
          const isLeft = params.labelRect.x < myChart.value.getWidth() / 2;
          const points = params.labelLinePoints;
          // Update the end point.
          points[2][0] = isLeft
            ? params.labelRect.x
            : params.labelRect.x + params.labelRect.width;
          return {
            labelLinePoints: points,
          };
        },
        data: data,
      };
    }),
  };
  myChart.value.setOption(option.value);
};
</script>

<style lang="scss" scoped></style>
